import React, {useState, useEffect} from "react";
import {
  Input,
  InputGroup,
  Stack,
  InputLeftAddon,
  InputRightAddon,
  FormHelperText,
  Button,
  FormControl
} from "@chakra-ui/core";
import { FaUserAlt, FaLock, FaCheck } from "react-icons/fa";
import { loginApi } from '../api/api';

export default function SignIn() {
  const axios = require('axios').default;
  const [user, setUser] = useState({
    email: '',
    password: ''
  });
  useEffect(() => {
    console.log(user)
  }, [user])
  const btnStyle = {
    fontSize: '18px',
    borderRadius: '25px',
    marginTop: '20px !important'
  }
  const reset = () => {
    setUser({
      ...user,
      email: '',
      password: ''
    })
  }
  const submit = () => {
    axios.post(loginApi, {user: JSON.parse(JSON.stringify(user))}).then(res => {
      reset()
      alert("Login success!")
    }).catch(err => {
      console.log(err)
      alert("Login failed!")
    })
  }

  const emailChange = e => {
    setUser({
      ...user,
      email: e.target.value
    });
  }
  const pwdChange = e => {
    setUser({
      ...user,
      password: e.target.value
    });
  }
  return (
    <form>
      <Stack spacing="2">
        <FormControl >
          <InputGroup>
            <InputLeftAddon children={<FaUserAlt />} />
            <Input type="email" placeholder="请输入用户名" value={user.email} onChange={emailChange}/>
          </InputGroup>
        </FormControl>
        <InputGroup>
          <InputLeftAddon children={<FaLock />} />
          <Input type="password" placeholder="请输入密码" value={user.password} onChange={pwdChange}/>
        </InputGroup>
        <Button onClick={submit} {...btnStyle} bg="#3194d0" _hover={{ bgColor: "#187cb7" }} w="100%" colorScheme="teal">
          登录
        </Button>
      </Stack>
    </form>
  );
}
